<template>
  <div class="search">
    <el-card :body-style="bodyStyle">
      <el-input placeholder="请输入搜索内容" v-model="keywords" @keyup.enter.native="handlerSearch">
        <template v-slot:append>
          <el-button @click="handlerSearch">搜 索</el-button>
        </template>
      </el-input>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'SearchBar',
  data () {
    return {
      bodyStyle: {
        textAlign: 'center'
      },
      keywords: null
    }
  },
  methods: {
    handlerSearch () {
      console.log('search', this.keywords)
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  height: 80px;

  .el-card {
    height: 100%;
    border: none;

    .el-input {
      width: 42rem;

      .el-button {
        font-family: PingFangSC-Regular;
        color: #fff;
        background-color: #1890ff;
        border-color: #1890ff;

        &:focus,
        &:hover {
          background-color: #66b1ff;
          border-color: #66b1ff;
        }
      }
    }
  }
}
</style>
